<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:body>
        <ui:composition template="./../template.xhtml">
            <ui:define name="content">
                <h:form id="form" style="text-align: center;">  
                    
                    <p:spacer height="20" />  
                    <p:growl id="growl" showDetail="true"/>
                    <p:panel header="Reporte de Operadores"> 
                        <p:spacer height="50" /> 
                        <h:outputText value="Fecha del Reporte: " />
                        <p:calendar value="#{calendarBean.date}" 
                                    id="popupCal"
                                    locale="es" 
                                    pattern="yyyy.mm.dd"
                                    maxdate="today"
                                    readonlyInput="true"
                                    showWeek="true"
                                    label="Fecha del Reporte"/>
                        <p:spacer height="20" />
                        <p:commandButton value="Enviar" update="display"
                                         icon="icon-login"
                                         oncomplete="PF('dialog').show()" />  
                        <p:dialog header="Selected Dates" widgetVar="dialog"   
                                  showEffect="fade" hideEffect="fade">  
                            <h:panelGrid id="display" columns="2" cellpadding="5">  
                                <h:outputText value="Popup Date:" />  
                                <h:outputText value="#{calendarBean.date}" id="popupDate">
                                </h:outputText>  
                            </h:panelGrid>  
                        </p:dialog>  
                        <h3></h3>
                        <p:spacer height="20" />
                    </p:panel>
                </h:form> 
                <p:spacer height="20" /> 
            </ui:define>
        </ui:composition>
        <script type="text/javascript">
            PrimeFaces.locales['es'] = {
                closeText: 'Cerrar',
                prevText: 'Anterior',
                nextText: 'Siguiente',
                monthNames: ['Enero','Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
                dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
                weekHeader: 'N Se',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: '',
                timeOnlyTitle: 'Sólo hora',
                timeText: 'Tiempo',
                hourText: 'Hora',
                minuteText: 'Minuto',
                secondText: 'Segundo',
                currentText: 'Fecha actual',
                ampm: false,
                month: 'Mes',
                week: 'Semana',
                day: 'Día',
                allDayText: 'Todo el día'
            };
        </script>
    </h:body>
</html>
